<template>
  <van-popup
    @close="handleClose"
    class="c-1gy50t pop-bottom"
    v-model="isShow"
    position="bottom"
  >
    <div class="c-1gy50t-header flex-row flex-justify-center flex-align-center">
      <img src="../img/left.png" />
      <div class="c-1gy50t-header-line"></div>
      <img src="../img/right.png" />
    </div>
    <div class="c-1gy50t-header-desc">本产品由中国人民保险有限公司承保</div>
    <div class="c-1gy50t-line"></div>
    <div class="c-1gy50t-tip">温馨提示，您即将进入投保流程：</div>
    <div class="c-1gy50t-tip-desc">
      请仔细阅读保险条款、投保须知等内容，为保障您的权益，您在销售页面的操作将会被记录并加密存储。
      <span class="c-1gy50t-tip-book" @click="handleClick">查看客户告知书</span>
    </div>
    <div class="c-1gy50t-btn" @click="handleMenu">我知道了</div>
  </van-popup>
</template>
<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    },
    handleMenu() {
      this.isShow = false
      this.$emit('close', false)
    },
    handleClick() {}
  }
}
</script>
<style lang="less" scoped>
.pop-bottom {
  height: 281px;
  width: 375px;
  box-sizing: border-box;
  border-radius: 13px 13px 0 0;
  padding: 20px 15px;
}
.c-1gy50t {
  &-header {
    width: 345px;
    text-align: center;
  }
  &-header-line {
    width: 1px;
    height: 14px;
    margin: 0 20px;
    background: #ccc;
  }
  &-header-desc {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
  &-line {
    height: 0.5px;
    background: #e9e9e9;
    margin: 15px 0;
  }
  &-tip {
    font-size: 17px;
    font-weight: bold;
    color: #333;
  }
  &-tip-desc {
    font-size: 15px;
    color: #666;
    margin-top: 10px;
  }
  &-tip-book {
    font-size: 15px;
    color: rgba(56, 163, 255, 1);
    cursor: pointer;
  }
  &-btn {
    margin-top: 25px;
    height: 50px;
    border-radius: 4.5px;
    background: @c-color-primary;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
  }
}
</style>
